<template>
	<view>
		 <uni-nav-bar title="分类" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
		 <view class="space-between">
			<view class="left" :style="{ height: pageHeight + 'px' }">
			 <view v-for="(item,index) in list" :key="index" :style="{background:active==index?'#fff':''}" @click="Change(index,item.id)">
				 <text :style="{background:active==index?'#2B93ED':''}"></text>
				  <text :style="{color:active==index?'#2B93ED':''}">{{item.name}}</text>
			 </view>
			</view>
			<view class="right" :style="{ height: pageHeight + 'px' }">
				<scroll-view
				  scroll-y="true"
				  enable-back-to-top
				  @scrolltolower="loadMore"
				  class="scroll-box"
				  :style="{ height: pageHeight+ 'px',padding:'20rpx 0px',background:'#fff' }"
				>
				<view v-for="(item,index) in shoppList" :key='item.id'>
					<view class="second">{{item.name}}</view>
					<view v-for="(items,indexs) in item.list" :key='indexs' >
						<view class="packageLsit" @click="navTo('shopp/Shopkeeper?id='+items.store_id)">
							<image src="../../static/groupBenefits/shop.png" mode=""></image>
							<text>{{items.store_name}}</text>
							<uni-icons type="forward" size="18" color="#666"></uni-icons>
						</view>
						<ShopList type="mini" :shopAll="items"></ShopList>
					</view>
				</view>
				<view class="column fillings" v-if="shoppList.length<1" style="height:80vh">
				  <image :src="Empty"></image>
				  <text>暂无商品~</text>
				</view>
				</scroll-view>
			</view> 
		 </view>
		 <Lotlats @position="position"></Lotlats>
	</view>
</template>

<script setup lang="ts">
	import { navBack,navTo } from '@/utils/navigator';
	import ShopList from '@c/groupBenefits/miniShop.vue'
	import Lotlats from '@c/team/Lotlat.vue';
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { Empty } from '@/utils/Static';
	import { classList,goodsList } from '@/gql/shop';
	import { toPublish } from '@mqtt';
  /**
   * 商品分类
   * @param lon  纬度
   * @param lat  经度
   * @param pageHeight  当前页面可视化高度
   * @param shoppList  商品列表
   * @param list  商品分类列表
   * @param active  商品分类索引
   * @param classID  商品分类ID
   */
	const lon=ref()
	const lat=ref()
	const pageHeight=ref()
	const shoppList=ref([])
	const list=ref([])
	const active=ref()
	const classID=ref('')
	onLoad((opction)=>{
		classID.value=opction.id
		uni.getSystemInfo({
		  success: function(res) {
		    pageHeight.value = (res.windowHeight - 20).toString();
		  },
		});
	})
	/**
	 * 获取当前城市信息
	 * @param {Object} lat 当前位置的纬度
	 * @param {Object} lot 当前位置的经度
	 */
	function position(la, lo) {
		lon.value=lo
		lat.value=la
	    classLeft()
	}
  /**
   * 初始化商品分类列表
   */
	function classLeft(){
		const payload = {
		  query: classList,
		};
		toPublish('ql/store/getGoodsCata', payload, (obj: any) => {
		  const { shop_goods_cate } = obj.data;
		  list.value=shop_goods_cate
		  list.value.map((item,index)=>{
			  if(classID.value==item.id){
				  active.value=index
				  classRight()
			  }else if(!classID.value){
				  active.value=0
				  classID.value=list.value[0].id
				  classRight()
			  }
		  })
		});
	}
  /**
   * 获取当前分类下的商品信息
   * @param lon  纬度
   * @param lat  经度
   * @param pid  分类ID
   */
	function classRight(){
		const payload = {
		  query: goodsList,
		  variables: {
		    pid:Number(classID.value),
        lon:Number(lon.value),
        lat:Number(lat.value),
		  },
		};
		toPublish('ql/store/getCataGoodsList', payload, (obj: any) => {
		  const { cate_goods_list } = obj.data;
		  shoppList.value=cate_goods_list
		});
	}
  /**
   * 切换分类商品
   * @param {Object} num 分类索引
   * @param {Object} id  分类ID
   * @param shoppList  商品列表清空
   */
	function Change(num,id){
		classID.value=id
		active.value=num
		shoppList.value=[]
		classRight()
	}
</script>

<style scoped lang="less">
	@import url('../shopp/less/classifi.less');
</style>